<template>
  <div class="exam-news" v-if="showNewsInfo && isShow">
    <div class="flex-center-wrap flex-justify-between">
      <div class="flex-center-wrap">
        <zl-icon
          class="pos-rel-top2"
          :icon="icon"
          :icon-style="iconStyle"
        ></zl-icon>
        <h3 class="text-primary f22 bold ml10 black">
          {{ showNewsInfo.column_title }}
        </h3>
      </div>
      <div v-if="showNewsInfo && showNewsInfo.child">
        <button
          class="exam-news-btn text-primary f16"
          v-for="(item, index) in showNewsInfo.child"
          :index="index"
          v-if="item.child"
          @click="changeActive(index, item)"
          :key="index"
          :class="{ 'exam-news-btn-active': active === index }"
        >
          {{ item.nav_name }}
        </button>
      </div>
    </div>
    <!-- _debug -->
    <template v-if="showNewsInfo && showNewsInfo.child">
      <article
        class="dynamic-list"
        v-if="active == index"
        v-for="(item, index) in newsInfo.child"
        :key="index"
      >
        <ul v-if="item.child.length">
          <li
            class="dynamic-list-item pointer text-ess-1 text-primary f16"
            :class="{
              mb20: indexB == 0,
              mb16: indexB > 0 && indexB < item.child.length - 1,
              lh20: indexB > 0 && indexB < item.child.length - 1,
              orange2: indexB == 0
            }"
            v-for="(itemB, indexB) in item.child.slice(0, 6)"
            :key="indexB"
            @click="jumpNewsDetail(itemB)"
            :title="itemB.title"
          >
            <a target="_blank" :href="parseFullPath(itemB.path + `_detail/${itemB.id}.html`)">
              {{ itemB.title }}
            </a>
          </li>
        </ul>
      </article>
    </template>
    <a
      v-if="newsInfo.child[active]"
      target="_blank"
      :href="parseFullPath(`/${professionPath}/${newsInfo.child[active].nav_path}/`)"
      class="look-more f14 text-third"
    >
      查看更多
      <i class="el-icon-arrow-right"></i>
    </a>
  </div>
</template>
<script>
import zlIcon from './zlIcon.vue'
export default {
  name: 'Head',
  // 子组件
  components: {
    'zl-icon': zlIcon
  },
  props: {
    newsInfo: {
      type: Object,
      default: () => ({})
    },
    iconStyle: {
      type: Object,
      default: () => ({})
    },
    icon: {
      type: String,
      default: ''
    },
    professionPath: {
      type: String,
      default: 'cjkj'
    },
    professionName: {
      type: String,
      default: ''
    }
  },
  // 数据
  data() {
    return {
      active: 0,
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  // 计算属性
  computed: {
    isShow() {
      return (
        this.newsInfo &&
        this.newsInfo.child.some(
          item => Array.isArray(item.child) && item.child.length > 0
        )
      )
    },
    showNewsInfo() {
      this.newsInfo.child =
        this.newsInfo &&
        Array.isArray(this.newsInfo.child) &&
        this.newsInfo.child.filter(item => {
          if (!Array.isArray(item.child) || !item.child.length) return false
          item.child = item.child.filter(itemB => itemB && itemB.title)
          return true
        })
      return this.newsInfo
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  mounted() {},
  // 方法
  methods: {
    changeActive(index, item) {
      this.zlaBtn = {
        key_name: this.newsInfo.column_title,
        key_content: `${this.professionName ? this.professionName + '_' : ''}${
          item.nav_name
        }`
      }
      this.active = index
    },
    // 跳转资讯详情页面
    jumpNewsDetail(row) {
      // 对象类型 1-资讯 2-广告 3-链接
      // let { id, path } = row
      // let jumpUrl = path + `_detail/${id}.html`
      // if (jumpUrl) {
      //   this.goTo(jumpUrl, { target: '_blank' })
      // }
      this.zlaBtn = {
        key_name:
          this.newsInfo.column_title +
          '_' +
          this.newsInfo.child[this.active].nav_name,
        key_content: row.title
      }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  }
}
</script>
<!--当前页面的样式 -->
<style scoped>
a {
  color: inherit;
  text-decoration: none;
}
.exam-news {
  width: 590px;
  height: 368px;
  padding: 20px;
  background: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 20px;
  color: #383838;
}
.exam-news:nth-of-type(3),
.exam-news:nth-of-type(4) {
  margin-bottom: 0px;
}
.exam-news-img {
  width: 24px;
  height: auto;
}
.exam-news-btn {
  cursor: pointer;
  height: 30px;
  padding: 0 6px;
  margin-left: 26px;
  font-size: 16px;
  border-radius: 4px;
  color: #666666;
}
.exam-news-btn:hover {
  font-size: 16px;
  color: #383838;
}
.exam-news-btn-active {
  font-size: 18px !important;
  color: #383838;
  font-weight: bold;
  cursor: pointer;
}
/* .exam-news-btn-active:hover{
  color: #fff;
} */
.ml5 {
  margin-left: 5px;
}
.dynamic-list {
  height: 260px;
  padding: 26px 0;
}
.dynamic-list-item {
  margin-right: 26px;
  height: 22px;
  line-height: 22px;
}
.dynamic-list-item:hover a {
  /* font-weight: bold; */
  text-decoration: revert;
}
.dynamic-list-item:last-of-type {
  margin-bottom: 0;
}
.lh20 {
  height: 20px;
  line-height: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb16 {
  margin-bottom: 16px;
}
.look-more {
  text-align: center;
  display: block;
  width: 550px;
  line-height: 40px;
  background: #ffffff;
  border-radius: 8px;
}
.orange2 {
  color: #ff8d38;
}
.text-third {
  color: #999999;
}
</style>
